<template>
  <el-container id="VisualPositionDetailDegreePieCharts" ref="chart">
  </el-container>
</template>

<script>
import {getPositionDetailDegreeOrExpCountDistribution, getPositionDetailDegreeOrExpSalaryDistribution} from "@/API/api";

export default {
  name: "VisualPositionDetailDegreePieCharts",
  data() {
    return {
      expCountDatas: {},
      degreeCountDatas: {},
      expSalaryDatas: {},
      degreeSalaryDatas: {},
    }
  },
  watch: {
    positionInfo: {
      immediate: true,
      deep:true,
      handler(newValue) {
        this.changeCharts();
      }
    }
  },
  methods: {
    initCharts() {
      let chartDom = document.getElementById('VisualPositionDetailDegreePieCharts');
      let myChart = this.$echarts.init(chartDom);
      const builderJson = {
        all: Math.max(...Object.values(this.expSalaryDatas).concat(Object.values(this.degreeSalaryDatas))),
        charts: this.expSalaryDatas,
        components: this.degreeSalaryDatas,
        // ie: 9743
      };
      const downloadJson = this.expCountDatas;
      const themeJson = this.degreeCountDatas;
      const waterMarkText = 'Ruan';
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = canvas.height = 100;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.globalAlpha = 0.08;
      ctx.font = '20px Microsoft Yahei';
      ctx.translate(50, 50);
      ctx.rotate(-Math.PI / 4);
      ctx.fillText(waterMarkText, 0, 0);
      let option = {
        backgroundColor: {
          type: 'pattern',
          image: canvas,
          repeat: 'repeat'
        },
        tooltip: {},
        title: [
          {
            text: `${this.positionInfo.label} - 工作经验 | 学历分布 平均薪资分布柱状图`,
            subtext: '',
            left: '25%',
            textAlign: 'center'
          },
          {
            text: `${this.positionInfo.label} - 工作经验分布饼状图`,
            subtext:
                '总计 ' +
                Object.keys(downloadJson).reduce(function (all, key) {
                  return all + downloadJson[key];
                }, 0),
            left: '75%',
            textAlign: 'center'
          },
          {
            text: `${this.positionInfo.label} - 学历分布饼状图`,
            subtext:
                '总计 ' +
                Object.keys(themeJson).reduce(function (all, key) {
                  return all + themeJson[key];
                }, 0),
            left: '75%',
            top: '50%',
            textAlign: 'center'
          }
        ],
        grid: [
          {
            top: 50,
            width: '50%',
            bottom: '45%',
            left: 10,
            containLabel: true
          },
          {
            top: '55%',
            width: '50%',
            bottom: 0,
            left: 10,
            containLabel: true
          }
        ],
        xAxis: [
          {
            type: 'value',
            max: builderJson.all,
            splitLine: {
              show: false
            }
          },
          {
            type: 'value',
            max: builderJson.all,
            gridIndex: 1,
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: Object.keys(builderJson.charts),
            axisLabel: {
              interval: 0,
              rotate: 30
            },
            splitLine: {
              show: false
            }
          },
          {
            gridIndex: 1,
            type: 'category',
            data: Object.keys(builderJson.components),
            axisLabel: {
              interval: 0,
              rotate: 30
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'bar',
            stack: 'chart',
            z: 3,
            label: {
              position: 'right',
              show: true
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.charts[key];
            })
          },
          {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
              color: '#eee'
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.all - builderJson.charts[key];
            })
          },
          {
            type: 'bar',
            stack: 'component',
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
              position: 'right',
              show: true
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return builderJson.components[key];
            })
          },
          {
            type: 'bar',
            stack: 'component',
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: '#eee'
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return builderJson.all - builderJson.components[key];
            })
          },
          {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '25%'],
            data: Object.keys(downloadJson).map(function (key) {
              return {
                name: key.replace('.js', ''),
                value: downloadJson[key]
              };
            })
          },
          {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '75%'],
            data: Object.keys(themeJson).map(function (key) {
              return {
                name: key.replace('.js', ''),
                value: themeJson[key]
              };
            })
          }
        ]
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    changeCharts() {
      Promise.all([
        this.$api.getPositionDetailDegreeOrExpCountDistribution(this.positionInfo.id, '1'),
        this.$api.getPositionDetailDegreeOrExpCountDistribution(this.positionInfo.id, '2'),
        this.$api.getPositionDetailDegreeOrExpSalaryDistribution(this.positionInfo.id, '1'),
        this.$api.getPositionDetailDegreeOrExpSalaryDistribution(this.positionInfo.id, '2'),
      ]).then(rep => {
        const degreeCountRep = rep[0].data
        const expCountRep = rep[1].data
        const degreeSalaryRep = rep[2].data
        const expSalaryRep = rep[3].data
        let result
        result = degreeCountRep.reduce((acc, obj) => {
          acc[obj.label] = obj.value
          return acc
        }, {})
        this.degreeCountDatas = result
        result = expCountRep.reduce((acc, obj) => {
          acc[obj.label] = obj.value
          return acc
        }, {})
        this.expCountDatas = result
        result = degreeSalaryRep.reduce((acc, obj) => {
          acc[obj.label] = obj.value
          return acc
        }, {})
        this.degreeSalaryDatas = result
        result = expSalaryRep.reduce((acc, obj) => {
          acc[obj.label] = obj.value
          return acc
        }, {})
        this.expSalaryDatas = result
        this.initCharts()
      })
    },
  },
  props: ['positionInfo'],
  mounted() {
  },
}
</script>

<style scoped>
#VisualPositionDetailDegreePieCharts {
  width: 100%;
  height: 85vh;
}
</style>